<template>
  <div class="login-container">
    <div class="login-top" style="-webkit-app-region: drag">
      OTT
      <span 
        class="iconfont icon-guanbi close"
        style="-webkit-app-region: drag"
        @click="closeWin"></span>
    </div>
    <div class="login-content">
      <input type="text" class="username" v-model="userName" placeholder="用户名"/>
      <input type="password" class="password" v-model="userPwd" placeholder="密码"/>
      <div class="login-text">
        <label><input type="checkbox" class="remember"/> 记住密码</label>
        <span class="forgetpwd">忘记密码?</span>
      </div>
      <button class="on-login" @click="handleLogin">登 录</button>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    data () {
      return {
        userName: null,
        userPwd: null
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.commen.userInfo
      })
    },
    methods: {
      closeWin () {
        const {ipcRenderer} = this.$electron
        ipcRenderer.send('close-win')
      },
      async handleLogin () {
        await this.$store.dispatch('fetchUserInfo', {userName: this.userName, userPwd: this.userPwd})
        if (!this.userInfo) return
        const {ipcRenderer} = this.$electron
        ipcRenderer.send('user-login')
      }
    }
  }
</script>

<style scoped>
  .login-container {
    height: 100vh;
    background: #4A9CFA;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    overflow: hidden;
  }
  .login-top {
    height: 36px;
    position: relative;
    line-height: 36px;
    padding: 0 20px;
    color: #fff;
  }
  .close {
    float: right;
    color: blueviolet;
    cursor: pointer;
    transition: all .5;
  }
  .close:hover {
    color: brown;
    transform: rotate(180deg);
  }
  .login-content {
    flex: 1;
    background: url('../assets/imgs/login.jpg') no-repeat; 
    display: flex;
    flex-direction: column;
    padding: 40px 48px;
  }
  .username, .password {
    height: 28px;
    margin-bottom: 12px;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 18px;
  }
  .login-text {
    color: blue;
  }
  .remember {
    cursor: pointer;
  }
  .forgetpwd {
    float: right;
    cursor: pointer;
  }
  .on-login {
    outline: none;
    border: none;
    height: 28px;
    margin-top: 16px;
    color: #fff;
    font-size: 18px;
    word-spacing: 50px;
    cursor: pointer;
    background-image:-webkit-gradient(linear, left top, left bottom, from(#B8A9F3), to(#6F50E7) );
  }
  .on-login:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#c8dd95), to(#428739) )
  }
</style>